<template>
  <div class="trendstatis">
    <a-card title="趋势统计" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%" :style="{ marginTop: '20px' }">
      <a-row :gutter="24">
        <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '15px' }">
          <p>每日用户数</p>
          <ve-line
            ref="userCount"
            :data="chartData"
            :settings="chartSettings"
            :extend="chartExtend"
            :judge-width="true"
            height="200px"></ve-line>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '15px' }">
          <p>法人交易量排名</p>
          <ve-histogram :data="legalPersonData" :extend="chartExtend" :judge-width="true" height="200px"></ve-histogram>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '15px' }">
          <p>每日交易量趋势</p>
          <ve-line
            ref="userCount"
            :data="volumeChartData"
            :settings="chartSettings"
            :extend="chartExtend"
            :judge-width="true"
            height="200px"></ve-line>
        </a-col>
        <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '15px' }">
          <p>每日平均耗时趋势</p>
          <ve-line
            ref="userCount"
            :data="volumeChartData"
            :settings="chartSettings"
            :extend="chartExtend"
            :judge-width="true"
            height="200px"></ve-line>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
export default {
  name: 'TrendStatistics',
  components: {
  },
  data () {
    return {
      myChart: null,
      chartSettings: {
        xAxisType: 'time'
      },
      chartExtend: {
        title: {
          // text: '每日用户数',
          x: 'left',
          y: '-5px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#333'// 主标题文字颜色
          }
        },
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '25%',
          left: '1%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        }
      },
      chartData: {
        columns: ['日期', '用户数'],
        rows: [
          { '日期': '2018-01-01', '用户数': 1393 },
          { '日期': '2018-01-02', '用户数': 3530 },
          { '日期': '2018-01-03', '用户数': 2923 },
          { '日期': '2018-01-05', '用户数': 1723 },
          { '日期': '2018-01-10', '用户数': 3792 },
          { '日期': '2018-01-20', '用户数': 4593 }
        ]
      },
      volumeChartData: {
        columns: ['日期', '交易量'],
        rows: [
          { '日期': '2020-01-01', '交易量': 11393 },
          { '日期': '2020-01-02', '交易量': 32530 },
          { '日期': '2020-01-03', '交易量': 2923 },
          { '日期': '2020-01-05', '交易量': 11723 },
          { '日期': '2020-01-10', '交易量': 3092 },
          { '日期': '2020-01-20', '交易量': 4593 }
        ]
      },
      takingChartData: {
        columns: ['日期', '耗时'],
        rows: [
          { '日期': '2020-11-01', '交易量': 13 },
          { '日期': '2020-11-02', '交易量': 10 },
          { '日期': '2020-11-03', '交易量': 3 },
          { '日期': '2020-11-05', '交易量': 22 },
          { '日期': '2020-11-10', '交易量': 8 },
          { '日期': '2020-11-20', '交易量': 9 }
        ]
      },
      legalPersonData: {
        columns: ['法人', '交易量'],
        rows: [
          { '法人': '法人1', '交易量': 800 },
          { '法人': '法人2', '交易量': 760 },
          { '法人': '法人3', '交易量': 700 },
          { '法人': '法人4', '交易量': 500 },
          { '法人': '法人5', '交易量': 400 },
          { '法人': '法人6', '交易量': 100 }
        ]
      },
      barOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      },
      grapesOption: {
        title: {
          text: 'Les Miserables',
          subtext: 'Circular layout',
          top: 'bottom',
          left: 'right'
        },
        tooltip: {
          position: 'inside'
        },
        legend: [{
          data: ''
        }],
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: 'Les Miserables',
            type: 'graph',
            layout: 'circular',
            circular: {
              rotateLabel: true
            },
            data: [],
            links: [],
            categories: [],
            roam: true,
            label: {
              position: 'right',
              formatter: '{b}'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            }
          }
        ]
      }
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.trendstatis{
  p{
   color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
  }
}
</style>
